@()(implicit session: Session)
@english.home.main("Taxonomy Tree") {

    <style>
            .text {
                text-indent: 2em;
                font-size: 16px;
            }

            #content ul li{
                padding: 10px 10px 10px 15px;
            }

        .fvgenome{
            margin-top: 20px;
            width: 100%;
        }

        .fvgenome img{
            width: 150px;
            height: 100px;
            float: left;
        }

        .fvgenome div{
            margin-left: 10px;
            float: left;
            margin-top: 20px;
            height: 100px;
            width: 450px;
        }

        .fvgenome a{
            color: cornflowerblue;
        }
    </style>


    <hgroup class="page-head">
        <h2><span>Taxonomy</span> Tree</h2>
    </hgroup>

    <div id="container" class="clearfix" >
        <div id="content" class="full-width container">

            <div id="tree" class="col-sm-5" style="height: 600px;
                overflow: auto;"></div>

            <div id="chart" class="col-sm-7" style="height: 600px;
                width: 58%;
                float: right;
                border: solid 1px #DDDDDD;
                overflow: auto;
                padding-top: 10px;
                padding-left: 30px">

                <h2>Favourite genomes</h2>

                <div class="fvgenome">
                    <img src='/PODB/utils/getMtimg?id=1'>
                    <div>
                        <h3><a href="/US/PODB/mitochondria/mtMoreInfoPage?id=1" target="_blank">Didymosphenia geminata</a></h3>
                        <h4>MT00001</h4>
                    </div>
                </div>

                <div class="fvgenome">
                    <img src='/PODB/utils/getMtimg?id=2'>
                    <div>
                        <h3><a href="/US/PODB/mitochondria/mtMoreInfoPage?id=3" target="_blank">Pseudo-nitzschia multiseries</a></h3>
                        <h4>MT00003</h4>
                    </div>
                </div>

                <div class="fvgenome">
                    <img src='/PODB/utils/getCpimg?id=1'>
                    <div  style="">
                        <h3><a href="/US/PODB/chloroplast/gbMoreInfo?id=1" target="_blank">Nitzschia palea</a></h3>
                        <h4>CP00001</h4>
                    </div>
                </div>

                <div class="fvgenome">
                    <img src='/PODB/utils/getCpimg?id=2'>
                    <div>
                        <h3><a href="/US/PODB/chloroplast/gbMoreInfo?id=2" target="_blank">Seminavis robusta strain D6</a></h3>
                        <h4>CP00002</h4>
                    </div>
                </div>


            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("bootstrap-treeview/bootstrap-treeview.js")"></script>

    <script>
            $(function () {

                var index = layer.load(1);

                $.ajax({
                    url: "@routes.TreeController.getTreeJson()",
                    type: "post",
                    dataType: "json",
                    success: function (result) {
                        $('#tree').treeview({
                            data: result,         // 数据源
                            highlightSelected: true,    //是否高亮选中
                            emptyIcon: '',   //没有子节点的节点图标
                            multiSelect: false,    //多选
                            selectedBackColor: 'undefined',
                            selectedColor: 'undefined',
                            showTags: true,
                            levels: 1
                        });
                        layer.close(index);
                    },
                    error: function () {
                        layer.close(index);
                        swal("错误", "树形结构加载失败。", "error")
                    }
                });
            });

            function getCpInfo(id) {
                window.open("/US/PODB/chloroplast/gbMoreInfo?id=" + id)
            }

            function getInfo(id, sample) {
                window.open("/US/PODB/mitochondria/mtMoreInfoPage?id=" + id);

/*                $.ajax({
                    url: "/PODB/tree/getInfoById?id=" + id + "&sample=" + sample,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        $("#introduce").hide();
                        $("#en_name").empty();
                        $("#en_name").text(data.name);
                        $("#info").empty();
                        $("#info").html(data.html);
                    }
                })*/
            }


    </script>

}


